<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /* vh是css中的视口单位  视口就是你能看到的浏览器区域  把整个浏览器可视区域一共分成100份vh  100vh就是整个浏览器的高度 */
            /* vw是css中的视口单位  视口就是你能看到的浏览器区域  把整个浏览器可视区域一共分成100份vw  100vw就是整个浏览器的宽度 */

            /* 让body的高度撑开整个视口(浏览器的可视区域) */
            height: 100vh;
            /* 开启弹性盒子 */
            display: flex;
            /* 主轴上项目对齐方式 */
            justify-content: center;
            /* 侧轴(交叉轴)上项目对齐方式 */
            align-items: center;
        }

        /* .father{
            width: 300px;
            height: 400px;
            background: skyblue;
        }
        .father .son{
            background: pink;
            width: 50vw;
            height: 50vh;
        } */

        canvas{
            border:1px solid red;
        }

        
    </style>
</head>
<body>
    <!-- <div class="father">
        <div class="son">
            son的内容
        </div>
    </div> -->

    <canvas width="600" height="400"></canvas>
    <script>
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        // 画布的宽度和高度
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        // 画布的中心点
        var x0 = canvasWidth / 2;
        var y0 = canvasHeight / 2;


        // 定义一个num变量,保存旋转的度数
        /* var num = 1;
        setInterval(function(){
            // 自加1
            num++;

            // 判断边界
            if( num > 360 ){
                num = 0;
            }
            // 清除整个画布的内容呢
            ctx.clearRect( 0, 0 , canvasWidth, canvasHeight );

            // 保存状态
            ctx.save();
            // 移动坐标系(canvas画布)
            ctx.translate( x0, y0 );
            // 旋转
            ctx.rotate( num * Math.PI / 180 );
            // 开启新路径
            ctx.beginPath();
            // 移动笔触
            ctx.moveTo( 200, 0 );
            // 画直线路径
            ctx.lineTo( 0, 0 );
            // 画直线路径
            ctx.lineTo( 0, 200 );
            // 描边
            ctx.stroke();
            // 恢复状态
            ctx.restore();
        }, 15 ); */


        /* // 保存状态
        ctx.save();
        // 移动坐标系(canvas画布)
        ctx.translate( x0, y0 );
        // 旋转
        ctx.rotate( 0 * Math.PI / 180 );
        // 开启新路径
        ctx.beginPath();
        // 移动笔触
        ctx.moveTo( 200, 0 );
        // 画直线路径
        ctx.lineTo( 0, 0 );
        // 画直线路径
        ctx.lineTo( 0, 200 );
        // 设置为虚线
        ctx.setLineDash( [5, 5] );
        // 描边
        ctx.stroke();
        
        // 开始绘制太极
        // 绘制下部分月牙
        ctx.beginPath();
        ctx.arc(0,0, 100, 0 , Math.PI);
        ctx.arc(-50,0, 50, Math.PI , 0);
        ctx.arc(50,0, 50, Math.PI , 0, true );
        ctx.setLineDash( [0] );
        // 设置填充颜色
        ctx.fillStyle = "black";
        // 填充
        ctx.fill();
        // 描边
        ctx.stroke();

        // 绘制左部分的小圆
        ctx.beginPath();
        ctx.arc(-50,0, 15, 0 , 2 * Math.PI );
        // 设置填充颜色
        ctx.fillStyle = "white";
        // 填充
        ctx.fill();

        // 绘制上部分月牙
        ctx.beginPath();
        ctx.arc(0,0, 100, 0 , Math.PI, true );
        ctx.arc(-50,0, 50, Math.PI , 0);
        ctx.arc(50,0, 50, Math.PI , 0, true );
        ctx.setLineDash( [0] );
        // 设置填充颜色
        ctx.fillStyle = "white";
        // 填充
        ctx.fill();
        // 描边
        ctx.stroke();

        // 绘制右部分的小圆
        ctx.beginPath();
        ctx.arc(50,0, 15, 0 , 2 * Math.PI );
        // 设置填充颜色
        ctx.fillStyle = "black";
        // 填充
        ctx.fill();

        // 恢复状态
        ctx.restore(); */

        var num = 0;
        setInterval(function(){
            // 清空画布的内容
            ctx.clearRect( 0, 0, canvasWidth, canvasHeight );

            num++;
            if( num > 360 ){
                num = 0;
            }

            // 保存状态
            ctx.save();
            // 移动坐标系(canvas画布)
            ctx.translate( x0, y0 );
            // 旋转
            ctx.rotate( num * Math.PI / 180 );
            
            // 开始绘制太极
            // 绘制下部分月牙
            ctx.beginPath();
            ctx.arc(0,0, 100, 0 , Math.PI);
            ctx.arc(-50,0, 50, Math.PI , 0);
            ctx.arc(50,0, 50, Math.PI , 0, true );
            ctx.setLineDash( [0] );
            // 设置填充颜色
            ctx.fillStyle = "black";
            // 填充
            ctx.fill();
            // 描边
            ctx.stroke();

            // 绘制左部分的小圆
            ctx.beginPath();
            ctx.arc(-50,0, 15, 0 , 2 * Math.PI );
            // 设置填充颜色
            ctx.fillStyle = "white";
            // 填充
            ctx.fill();

            // 绘制上部分月牙
            ctx.beginPath();
            ctx.arc(0,0, 100, 0 , Math.PI, true );
            ctx.arc(-50,0, 50, Math.PI , 0);
            ctx.arc(50,0, 50, Math.PI , 0, true );
            ctx.setLineDash( [0] );
            // 设置填充颜色
            ctx.fillStyle = "white";
            // 填充
            ctx.fill();
            // 描边
            ctx.stroke();

            // 绘制右部分的小圆
            ctx.beginPath();
            ctx.arc(50,0, 15, 0 , 2 * Math.PI );
            // 设置填充颜色
            ctx.fillStyle = "black";
            // 填充
            ctx.fill();

            // 恢复状态
            ctx.restore();

        }, 20)
    </script>
</body>
</html>